---
title: ブレイクポイント
description: ブレイクポイントをカスタマイズする方法を学ぶ。
---

:::tip
レスポンシブデザインの概要は[こちら](/docs/styling/responsive-design)をご覧ください。
:::

## 概要

ブレイクポイントは、[レスポンシブデザイン](/docs/styling/responsive-design)などで使用されるトークンです。

テーマに定義されているブレイクポイントは[こちら](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/tokens/breakpoints.ts)です。

```tsx
export const breakpoints = defineTokens.breakpoints({
  sm: "30em",
  md: "48em",
  lg: "61em",
  xl: "80em",
  "2xl": "90em",
})
```

## カスタマイズ

::::steps

### テーマを生成する

[CLI](/docs/theming/cli)を使用してテーマを生成します。

:::warning
下記のコマンドを実行する前に、`@yamada-ui/cli`をインストールして`init`コマンドを実行する必要があります。詳しくは、[こちら](/docs/get-started/cli)をご覧ください。
:::

:::code-group

```bash [pnpm]
pnpm yamada-cli theme
```

```bash [npm]
npm yamada-cli theme
```

```bash [yarn]
yarn yamada-cli theme
```

```bash [bun]
bun yamada-cli theme
```

:::

### トークンを変更する

生成したテーマの`tokens/breakpoints.ts`を変更します。

```tsx title="theme/tokens/breakpoints.ts"
import { defineTokens } from "@yamada-ui/react"

export const breakpoints = defineTokens.breakpoints({
  sm: "27em", // [!code highlight]
  md: "48em",
  lg: "61em",
  xl: "80em",
  "2xl": "90em",
})
```

### プロバイダーを更新する

生成したテーマを`UIProvider`に設定します。

```tsx {2,6}
import { UIProvider } from "@workspaces/ui"
import { theme } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme}>
      <YourApplication />
    </UIProvider>
  )
}
```

::::

## メディアクエリ

デフォルトでは、`@media(max-width)`のメディアクエリを用いたレスポンシブデザインを採用しています。

```tsx preview functional
const config = defineConfig({ breakpoint: { direction: "up" } })

const Component: FC<{ query: string }> = ({ query }) => {
  const breakpoint = useBreakpoint()

  return (
    <Text>
      The breakpoint when using{" "}
      <Text as="span" color="info">
        {query}
      </Text>{" "}
      is "{breakpoint}".
    </Text>
  )
}

return (
  <VStack gap="md">
    <Component query="@media(max-width)" />

    <UIProvider config={config}>
      <Component query="@media(min-width)" />
    </UIProvider>
  </VStack>
)
```

もし、`@media(min-width)`のメディアクエリを採用する場合は、コンフィグの`breakpoint.direction`を`"up"`に設定します。

::::steps

### コンフィグを変更する

生成したテーマの`config.ts`を変更します。

```tsx title="theme/config.ts"
import { defineConfig } from "@yamada-ui/react"

export const config = defineConfig({
  css: { varPrefix: "ui" },
  breakpoint: { direction: "up", identifier: "@media screen" }, // [!code highlight]
  defaultColorMode: "light",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})
```

### プロバイダーを更新する

生成したテーマを`UIProvider`に設定します。

```tsx {2,6}
import { UIProvider } from "@workspaces/ui"
import { theme, config } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme} config={config}>
      <YourApplication />
    </UIProvider>
  )
}
```

::::

## コンテナクエリ

レスポンシブデザインは、メディアクエリを使用しています。もし、コンテナクエリを使用する場合は、コンフィグの`breakpoint.identifier`を`"@container"`に設定します。

```tsx preview functional
const containerRef = useRef<HTMLDivElement>(null)
const config = defineConfig({
  breakpoint: { containerRef, identifier: "@container" },
})

const Component: FC<{ query: string }> = ({ query }) => {
  const breakpoint = useBreakpoint()

  return (
    <Text>
      The breakpoint when using{" "}
      <Text as="span" color="info">
        {query}
      </Text>{" "}
      is "{breakpoint}".
    </Text>
  )
}

return (
  <Box
    ref={containerRef}
    bg="bg.panel"
    containerType="inline-size"
    overflow="auto"
    maxW="full"
    p="md"
    resize="inline"
    w="full"
  >
    <Component query="@media(max-width)" />

    <UIProvider config={config}>
      <Component query="@container" />
    </UIProvider>
  </Box>
)
```
